<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reportUserCountApi, reportPositionCountApi } from '../../api/admin'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

onMounted(() => {
  reportUserCount()
  reportPosCount()
})
// 统计用户
let reportUserCount = async () => {
  const result = await reportUserCountApi()
  if (result.code){
    configUser.value.series[0].data = result.data
    showReportUser() 
  }else{
    ElMessage.error(result.message)
  }
}
// 统计职位
let reportPosCount = async () => { 
  const resullt = await reportPositionCountApi()
  if (resullt.code){
    configPos.value.series[0].data = resullt.data
    showReportPos()
  }else{
    ElMessage.error(resullt.message)
  }
}
let reportUser = ref(null)
let reportPos = ref(null)
// 用户统计配置
let configUser = ref({
  title: {
    text: '用户类型统计',
    left: 'center',
    textStyle: {
      fontSize: 30,
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '10%',
    left: 'center'
  },
  series: [
    {
      name: '人数',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: null
    }
  ]
})
// 职位统计配置
var configPos = ref({
  title: {
    text: '职位发布趋势',
    left: 'center',
    textStyle: {
      fontSize: 30,
    }
  },
  xAxis: {
    type: 'category',
    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 0, 0, 23, 22, 12, 232],
      type: 'line',
    }
  ]
})
let showReportUser = () => {
  var myChart = echarts.init(reportUser.value);
  // 绘制图表
  myChart.setOption(configUser.value)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
let showReportPos = () => {
  var myChart = echarts.init(reportPos.value);
  // 绘制图表
  myChart.setOption(configPos.value)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
</script>

<template>   
  <div ref="reportPos" class="container1"></div>
  <div ref="reportUser" class="container2"></div>
</template>

<style scoped>
.container1, .container2 {
  float: left;
  width: 49%;
  height: 600px;
}
.container1 {
  border-right: 1px dashed #ccc;
}
</style>